html5 新型api

Page Visibility API

为了解决隐藏或最小化标签页,让开发人员知道,有哪些功能可以停下来,

```,``` visibilitychange ```事件
1
2


document.addEventListener(‘msvisibilitychange’, handleVisibilityChange);
document.addEventListener(‘webkitvisibilitychange’, handleVisibilityChange);

function handleVisibilityChange () {
var msg = ‘’;

// 检测当前页面是否被隐藏
if (document.hidden || document.msHidden || document.webkitHidden) {
    msg = 'Page has hidden' + new Date();
} else {
    msg = 'Page is visible now ' + new Date();
}

console.log(msg);

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

### requestAnimationFrame

使用原始的`setTimeout`和`setInterval`定时器方法创建动画不精确,HTML5优化这个问题,提供一个api,避免过度渲染,解决精度低问题。

```javascript
var requestAnimationFrame = window.requestAnimationFrame ||
window.msRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame;

var startTime = window.mozRequestAnimationStartTime || Date.now();

requestAnimationFrame(draw);

var dist = 500;
var start = 0;
var step = 10;
var $block = document.getElementById('block');

function draw (timestamp) {
var drawStart = (timestamp || Date.now());
var diff = drawStart - startTime;
var next = start + step;
$block.style.left = next + 'px';

start = next;

if(start > dist) {
// cancelAnimationFrame();
return false;
}

console.log('diff:', diff);
// 把startTime重写为这一次的绘制时间
startTime = drawStart;

// 重绘UI
requestAnimationFrame(draw);
}